<template>
    <div>
        <footer class="text-gray-600 body-font">
  <div class="container px-5 py-24 mx-auto flex md:items-center lg:items-start md:flex-row md:flex-nowrap flex-wrap flex-col">
    <div class="w-64 flex-shrink-0 md:mx-0 mx-auto text-center md:text-left">
      <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
        </svg>
        <span class="ml-3 text-xl">网站名称</span>
      </a>
      <p class="mt-2 text-sm text-gray-500">Air plant banjo lyft occupy retro adaptogen indego</p>
    </div>
    <div class="flex-grow flex flex-wrap md:pl-20 -mb-10 md:mt-0 mt-10 md:text-left text-center">
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-600 hover:text-gray-800">First Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-600 hover:text-gray-800">First Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-600 hover:text-gray-800">First Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
          </li>
        </nav>
      </div>
      <div class="lg:w-1/4 md:w-1/2 w-full px-4">
        <h2 class="title-font font-medium text-gray-900 tracking-widest text-sm mb-3">CATEGORIES</h2>
        <nav class="list-none mb-10">
          <li>
            <a class="text-gray-600 hover:text-gray-800">First Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Second Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Third Link</a>
          </li>
          <li>
            <a class="text-gray-600 hover:text-gray-800">Fourth Link</a>
          </li>
        </nav>
      </div>
    </div>
  </div>
  <div class="bg-gray-100">
    <div class="container mx-auto py-4 px-5 flex flex-wrap flex-col sm:flex-row">
      <p class="text-gray-500 text-sm text-center sm:text-left">© 2023 Tailblocks —
        <a href="https://twitter.com/knyttneve" rel="noopener noreferrer" class="text-gray-600 ml-1" target="_blank">@knyttneve</a>
      </p>
      <span class="inline-flex sm:ml-auto sm:mt-0 mt-2 justify-center sm:justify-start">
        <a class="text-gray-500">
          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-500">
          <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <path d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-500">
          <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
            <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
          </svg>
        </a>
        <a class="ml-3 text-gray-500">
          <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
            <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
            <circle cx="4" cy="4" r="2" stroke="none"></circle>
          </svg>
        </a>
      </span>
    </div>
  </div>
</footer>
    </div>
</template>

<script>
export default {
    data() {
        return {
        };
    },
};
</script>

<style scoped lang="scss">
.navs {
    display: flex;
    width: 100%;
    height: 72px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    justify-content: space-between;


    .tongimg {
        width: 50px;
        height: 50px;
        border-radius: 50%;

        img {
            display: block;
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    }

    .images {
        display: flex;
        width: 219px;
        align-items: center;
        margin: 6px 59px 12px 30px;

        :nth-child(1) {
            width: 40px;
            height: 35px;
        }

        :nth-child(2) {
            width: 100px;
            height: 25px;
            margin-left: 10px;
            margin-top: 4px;
        }
    }

    ::v-deep .el-input__inner {
        width: 580px;
        border-radius: 15px;
        margin: 14px 0px;
    }

    .ipts {
        flex-grow: 1;
    }

    ::v-deep .el-input {
        width: 580px;
    }

    .left {
        display: flex;
        justify-content: center;
        align-items: center;
        // margin-left: 310px;
        margin-right: 30px;

        .ones:hover .exple {
            background: #fff;
        }

        .left-c {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            .left-ding {
                position: relative;
                box-sizing: border-box;

                .extwo {
                    height: 112px !important;
                }

                .three {
                    height: 168px !important;
                }

                .exple {
                    position: absolute;
                    top: 45px;
                    left: 0;
                    width: 217px;
                    height: 336px;
                    border-radius: 5px;
                    display: none;
                    background: #fff;
                    padding-top: 12px;
                    border-radius: 0px 0px 10px 10px;
                    z-index: 999;

                    li {
                        width: 217px;
                        height: 56px;
                        text-align: left;
                        line-height: 56px;
                        padding: 0px 0px 0px 15px;
                        background: #fff;
                        font-style: normal;
                        font-weight: 500;
                        font-size: 16px;
                        color: #353840;
                        box-sizing: border-box;
                        border: 1px solid #ffffff;
                    }

                    :last-child {
                        border-radius: 0px 0px 10px 10px;
                    }

                    li:hover {
                        border: 1px solid #e6e6e6;
                        background: #fbfdff;
                    }
                }
            }

            .left-ding:hover .exple {
                display: block;
            }

            .left-ding:hover .ones {
                background: #f3f4f6;
            }

            .ones {
                width: 111px;
                height: 44px;
                line-height: 44px;
                text-align: center;
                border-radius: 540px;
                margin-right: 10px;
            }

            .ones:hover {
                background: #f3f4f6;
            }

            .ones:hover .exple {
                background: #fff;
                padding-bottom: 10px;
            }

            .stats {
                width: 111px;
                height: 44px;
                line-height: 44px;
                line-height: 44px;
                background: #f3f4f6;
                text-align: center;
                margin-right: 10px;
                border-radius: 540px;
            }

            .about {
                width: 111px;
                height: 44px;
                line-height: 44px;
                line-height: 44px;
                background: #f3f4f6;
                text-align: center;
                margin-right: 10px;
                border-radius: 540px;
            }
        }

        .shu {
            width: 1px;
            height: 24px;
            line-height: 24px;
            background-color: #d1d5db;
        }

        .dingwei {
            position: relative;
            cursor: pointer;
        }

        .dingwei:hover .langy {
            display: block;
        }

        .dingwei:hover .lang {
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin-left: 18px;
            background: url(@/assets/icon/home/qius.png) no-repeat;
            background-size: 100% 100%;
            transform: scale(2);
        }

        .lang {
            position: relative;
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin-left: 18px;
            background: url(@/assets/icon/home/qiu.png) no-repeat;
            background-size: 100% 100%;
        }

        .langy {
            position: absolute;
            left: -20px;
            top: 15px;
            width: fit-content;
            height: fit-content;
            text-align: left;
            transition: height 0.35s;
            padding-top: 30px;
            display: none;
            z-index: 999;

            :nth-child(3) {
                border-radius: 0px 0px 10px 10px;
            }

            .name {
                padding-left: 15px;
                width: 100px;
                height: 56px;
                line-height: 56px;
                background-color: #ffffff;
                box-sizing: border-box;
                border: 1px solid #ffffff;
                transition: height 0.5s;
            }

            .name:hover {
                border: 1px solid #d1d5db;
                background: #fbfdff;
            }
        }

        .titles {
            line-height: 24px;
            margin-left: 17px;
        }

        .tong {
            position: relative;
            width: 40px;
            height: 40px;
            margin-left: 28px;
            text-align: center;

            .timg {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 18px;
                height: 20px;
                line-height: 20px;
                background: url(@/assets/icon/home/wtong.png) no-repeat;
                background-size: 100% 100%;
                z-index: 999;
            }

            .stimg {
                position: absolute;
                top: 15%;
                left: 70%;
                width: 6px;
                height: 6px;
                background: #3772ff;
                border-radius: 50%;
            }

            .exples {
                position: absolute;
                top: 41px;
                left: -370px;
                width: 439px;
                height: 310px;
                padding-top: 20px;
                display: none;
                background: #fff;
                padding-top: 12px;
                border-radius: 0px 0px 10px 10px;
                z-index: 9999;

                li {
                    width: 100%;
                    height: 80px;
                    padding: 0px 0px 0px 15px;
                    background: #fff;
                    font-style: normal;
                    font-weight: 500;
                    font-size: 16px;
                    color: #353840;
                    box-sizing: border-box;
                    border: 1px solid #e5e8eb;
                    display: flex;
                    align-items: center;
                    text-align: left;
                }

                .one {
                    width: 49px;
                    height: 21px;
                    margin-left: 230px;
                    display: flex;

                    :nth-child(1) {
                        margin-right: 6px;
                    }

                    :nth-child(2) {
                        width: 10px;
                        height: 4px;
                        margin-right: 6px;
                    }
                }

                .name {
                    margin-left: 8px;

                    .xing {
                        width: fit-content;
                    }

                    .ins {
                        display: flex;

                        .names {
                            width: 256px;
                            height: 20px;
                            font-style: normal;
                            font-weight: 350;
                            font-size: 14px;
                            line-height: 21px;
                            display: flex;
                            align-items: center;
                            color: #a7a7a7;
                        }

                        .colo {
                            width: 6px;
                            height: 6px;
                            background: #2081e2;
                            border-radius: 50%;
                            margin-left: 65px;
                        }
                    }

                    .time {
                        font-style: normal;
                        font-weight: 350;
                        font-size: 12px;
                        line-height: 18px;
                        color: #a7a7a7;
                    }
                }

                :last-child {
                    border-radius: 0px 0px 10px 10px;
                }

                li:hover {
                    border: 1px solid #e6e6e6;
                    background: #fbfdff;
                }
            }
        }

        .tong:hover {
            background: #f3f4f6;
            border-radius: 22px;
        }

        .tong:hover .exples {
            display: block;
        }

        .btn {
            width: 96px;
            height: 44px;
            margin-left: 30px;
        }

        .union {
            width: 40px;
            height: 40px;
            // margin-left: 16px;
            margin-bottom: 5px;
            cursor: pointer;

            .userinfo {
                display: block;
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
        }

        .dings {
            position: relative;
            margin: 0px 20px;
            width: 40px;
            height: 40px;

            .times {
                position: absolute;
                top: 20px;
                left: -85px;
                padding-top: 31px;
                z-index: 99;
                cursor: pointer;
                display: none;

                .names {
                    padding-left: 15px;
                    width: 220px;
                    height: 56px;
                    line-height: 56px;
                    background-color: #ffffff;
                    box-sizing: border-box;
                    border: 2px solid #ffffff;
                }

                .names:hover {
                    border: 2px solid #d1d5db;
                    background: #fbfdff;
                }
            }
        }

        .dings:hover .times {
            display: block;
        }
    }
}</style>
